<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>节点</title>
	<style type="text/css">
        #box{
        	width:300px;height:300px;background:yellow;
        }
        #box1{
        	width:300px;height:300px;background:pink;
        }

        #box2{
        	width:300px;height:300px;background:green;
        }

	</style>
</head>
<body>
   <input type="button" value="添加" id="btn">
   <div id="box"></div>
   <script type="text/javascript">
        //往box添加一个a节点
        //抓取box
        var box = document.getElementById('box');
        //添加a标签
        var a = document.createElement('a');    //creatTextNode():创建文本节点
        //给a加属性
        a.href = "http://www.baidu.com";
        //a里面加文字
        a.innerHTML = "百度";
        //把a放到box里面
        box.appendChild(a);   



        //添加一个按钮 
        
        btn.onclick = function(){
        	var btn = document.getElementById('btn');
        	var box = document.getElementById('box');        	
	        var a = document.createElement('a');    //creatTextNode():创建文本节点
	        a.href = "http://www.baidu.com";
	        a.innerHTML = "百度";
	        box.appendChild(a); 

        }
   </script>



   <div id="box1"></div>  
   <script type="text/javascript">
       //创建一个文本节点
       //往id='box1'的div添加一个h1标签    h1里面加入文字  Hello World
       var box1 = document.getElementById('box1');
       var h = document.createElement('H1');
       var text = document.createTextNode('Hello World');
       h.appendChild(text);
       box1.appendChild(h);   //在页面输出Hello World


   </script>

   <input type="button" id="btn2" value="添加">
    <div id="box2">
   	   <p id="son">son</p>
    </div>
    <script type="text/javascript">
        //现在我要在son之前插入一个节点   用inderBefore
        btn2.onclick = function(){
        	//现在我要在son之前插入一个节点   用inderBefore
        	var box2 = document.getElementById('box2');
        	var son = document.getElementById('son');
        	var a = document.createElement('a');    
	        a.href = "http://www.baidu.com";
	        a.innerHTML = "百度";
            box2.insertBefore(a,son);

        }
        
    </script>
	
</body>
</html>